<template>
    <d2-container>
		<template slot="header">
			<el-button type="primary" @click="change">新 增</el-button>
		</template>
    <template>

      <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          stripe border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
          <el-table-column
            fixed
            prop="title"
            label="名称"
            >
          </el-table-column>
          <el-table-column
          fixed
            prop="type"
            label="菜单类型"
            width="110"
            :filters="[{ text: '功能', value: '1' }, { text: '按钮', value: '2' }]"
            :filter-method="filterType"
            filter-placement="bottom-end">
            <template slot-scope="scope">
            <el-tag
              :type="scope.row.type === '1' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.type==1?"功能":"按钮"}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
          fixed
            prop="method"
            label="请求方式"
           >
          </el-table-column>
          <el-table-column
          fixed
            prop="path"
            label="路径"
            >
          </el-table-column>
		  <el-table-column
		  fixed
		    prop="sort"
		    label="排序"
		    >
		  </el-table-column>
          <el-table-column
          fixed
            prop="permission"
            label="权限"
            >
          </el-table-column>
          <el-table-column
          fixed
            prop="description"
            label="描述"
           >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="updateRow(scope.row.id)">编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.row.id)"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

    </template>
    <template>
      <div>
          <keep-alive>
              <add :result="addComponent" @on-result-change="onResultChange" @on-loadlist-change="fetchData" ></add>
            </keep-alive>
      </div>
      <div>
          <keep-alive>
              <updatePage @on-loadlist-change="fetchData"  :uShow="updateComponent" @on-uShow-change="onUShowChange" :uId="updateId" @on-id-change="onIdChange"></updatePage>
            </keep-alive>
      </div>
    </template>
    <!-- <template>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[ 10, 20, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template> -->
  </d2-container>
</template>
<script>
import { getResourceTree, PermissionList, DelPermission } from '@api/permission/permission'
import add from './add'
import updatePage from './update'

export default {
  name: 'system-permission',
  components: {
    add, updatePage
  },
  data () {
    return {
      addComponent: false,
      updateComponent: false,
      updateId: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    /** 双向绑定 start */
    change () {
      this.addComponent = !this.addComponent
    },
    onResultChange (val) {
      this.addComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    uChange () {
      this.updateComponent = !this.updateComponent
    },
    onUShowChange (val) {
      this.updateComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange (val) {
      this.updateId = val
    },
    onIdChange (val) {
      this.updateId = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    /** 双向绑定 end */
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      getResourceTree({
        currentPage: this.currentPage, pageSize: this.pageSize
      }).then(res => {
        // console.info(JSON.stringify(res.data))
        this.tableData = res.data
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    handleSizeChange (val) {
      //  console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData()
    },
    deleteRow (id) {
      this.$confirm('确定删除吗').then(() => {
        this.loading = true
        DelPermission({ resourceId: id }).then(res => {
          this.fetchData()
          this.loading = false
        }).catch(err => {
          console.log('err', err)
          this.loading = false
        })
        done()
      }).catch(() => {
        // console.log("取消操作");
      })
    },
    filterType (value, row) {
      return row.type === value
    },
    updateRow (id) {
      this.uChange()
      this.idChange(id)
    }
  }
}

</script>
